<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../lib/vue.js"></script>
</head>
<body>
  <div id="app">
    <button @click="getHospitalList">获取数据</button>
    <h3 v-if="isLoading">正在拼命加载中……</h3>
    <template v-else>
      <div v-for="item in hospitalList">
        <h3>{{item.hosname | book}}</h3>
        <!--            <img height="100" :src="'data:image/jpeg;base64,'+item.logoData" alt="">-->
        <img height="100" :src="item.logoData | base64" alt="">
        <hr/>
      </div>
    </template>

  </div>
</body>
<script>
  new Vue({
    el:"#app",
    data:{
      hospitalList:[],
      isLoading:false
    },
    methods:{
      async getHospitalList(){
        this.isLoading = true;
        // 1
        // fetch("./data.json").then(value=>{
        //     value.json().then(res=>{
        //         console.log(res);
        //     })
        // })

        // 2
        // fetch("./data.json").then(value=>{
        //     return value.json()
        // }).then(res=>{
        //     console.log(res);
        // })

        // 3
        const res = await fetch("./data.json").then(value=>{
          return value.json()
        })
        this.hospitalList = res.data.content;
        this.isLoading = false;
      }
    },
    filters:{
      book(v){
        return "《"+v+"》";
      },
      base64(v){
        return "data:image/jpeg;base64,"+v;
      }

    }
  })
</script>
</html>